<template>
  <!--最外层包裹-->
  <div id="cartoon">
    <v-header :index="1"></v-header>
    <div class="navigation">
      <div :class="index==1?'navigation-item active':'navigation-item'" @click="toRecommend"><span>推荐</span></div>
      <div :class="index==2?'navigation-item active':'navigation-item'" @click="toMAD"><span>MAD.AMV</span></div>
      <div :class="index==3?'navigation-item active':'navigation-item'" @click="toMMD"><span>MMD.3D</span></div>
      <div :class="index==4?'navigation-item active':'navigation-item'" @click="toDuanPian"><span>短片·手书·配音</span></div>
    </div>
    <hr>
    <div class="cartoon-wrapper" ref="cartoonWrapper">
        <div class="cartoons">
          <div class="top">
            <div class="title">热门推荐</div>
            <div class="rank">排行榜  ></div>
          </div>
          <!--推荐-->
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in recommendList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <!--MAD.AMV-->
          <div class="top">
            <div class="title">MAD.AMV</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in MADList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="top">
            <div class="title">MMD.3D</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in MMDList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="top">
            <div class="title">短片·手书·配音</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in duanpianList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="top">
            <div class="title">手办·模玩</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in shoubanList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="top">
            <div class="title">特摄</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in tesheList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
          <div class="top">
            <div class="title">综合</div>
            <div class="more">查看更多  ></div>
          </div>
          <div class="cartoon-items">
            <div class="cartoon-item" v-for="(item,index) in zongheList" :key="index">
              <div class="item-wrapper">
                <img :src="item.pic">
                <div>
                  <span class="playCount">{{computePlayCount(item)}}</span>
                  <span class="sayCount">{{computeVideoReview(item)}}</span>
                </div>
                <p>{{item.title}}</p>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import header from "./header";
  /*动画组件*/
  export default {
    name: "cartoon",
    data() {
      return {
        recommendList: [],
        MADList:[],
        MMDList:[],
        duanpianList:[],
        shoubanList:[],
        tesheList:[],
        zongheList:[],
        index:1
      }
    },
    computed:{
    },
    methods: {
      getCartoon(fileName) {
        return this.$http.get(`http://localhost:8080/static/gjw/${fileName}`);
      },
      computePlayCount(item){
        if (item.play>10000){
          return `${(item.play/10000).toFixed(1)}万`;
        }else {
          return item.play;
        }
      },
      computeVideoReview(item){
        if (item.video_review>10000){
          return `${(item.video_review/10000).toFixed(1)}万`;
        }else {
          return item.video_review;
        }
      },
      initScroll(){
        this.cartoonScroll=new BScroll(this.$refs.cartoonWrapper,{click:true,probeType:3})
      },
      toRecommend(){
        this.index=1
      },
      toMAD(){
        this.index=2
      },
      toMMD(){
        this.index=3
      },
      toDuanPian(){
        this.index=4
      }
    },
    created() {

      let fileName = "recommend.json";
      let promise = this.getCartoon(fileName)
      promise.then(res => {
        this.recommendList = res.data.data.slice(0, 4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="MAD.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.MADList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="MMD.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.MMDList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="duanpian.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.duanpianList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="shouban.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.shoubanList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="teshe.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.tesheList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
      fileName="zonghe.json"
      promise=this.getCartoon(fileName)
      promise.then(res=>{
        this.zongheList=res.data.data.slice(0,4);
        this.$nextTick(()=>{
          this.initScroll();
        })
      })
    },
    components:{
      'v-header':header
    }
  }
</script>

<style scoped>

  #cartoon{
    width: 100%;
    height: 100%;
  }

  .cartoon-wrapper {
    height: calc(100% - 164px);
    overflow: hidden;
    width: 100%;
  }

  .top {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .top .title{

    font-size: 15px;
    color: #000000;
  }

  .top .rank{
    font-size: 15px;
    color: #FFA726;
  }
  .top .more{
    font-size: 15px;
    color: #999999;
  }
  .cartoon-items {

    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px 10px 20px 10px;

  }

  .cartoon-item {
    margin-bottom: 10px;
    position: relative;
  }

  .cartoon-item p {
    width: 160px;
    font-size: 13px;
    color: #212121;
  }

  .cartoon-item img {
    width: 160px;
    height: 90px;
    border-radius: 4px;

  }
  .cartoon-item .playCount{
    position: absolute;
    left: 4px;
    top: 70px;
    font-size: 13px;
    color: #FFFFFF;
  }
  .cartoon-item .sayCount{
    position: absolute;
    right: 4px;
    top: 70px;
    font-size: 13px;
    color: #FFFFFF;
  }
  .navigation{

    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-around;
  }
  .navigation .navigation-item{
    height: 100%;
    line-height: 40px;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    color: #505050;
  }
  hr{
    margin-bottom: 20px;
  }
  .active{
    border-bottom: 3px solid #fb7299;
  }
  .active span{
    color: #fb7299;
  }
</style>
